<!--
 * @Autor: Hongting Yuan
 * @Date: 2021-12-08 21:04:13
 * @LastEditors: Haiting Zhao
 * @LastEditTime: 2021-12-19 13:08:17
 * @Description: file content
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\views\scientificexam\ExamScheme.vue
-->

<template>
  <div style="width: 100%;height: 100%">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name:'WorkPlace' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>科研考核</el-breadcrumb-item>
      <el-breadcrumb-item>考核方案</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 渲染表格信息 -->
      <el-table
        :data="schemeList"
        style="width: 80%;margin: auto;height: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="atName"
          align="center"
          label="考核类型"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="categoryName"
          :show-overflow-tooltip="true"
          align="center"
          label="等级"
        />
        <el-table-column
          prop="score"
          :show-overflow-tooltip="true"
          align="center"
          label="得分"
        />
        <el-table-column
          label="操作"
          :show-overflow-tooltip="true"
          align="center"
          width="150px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="showEditDialog(scope.row)"
            >编 辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑字典数据对话框 -->
    <el-dialog :title="objectScheme.atName + ' —— 编辑'" :visible.sync="editDialogVisible" width="40%">
      <el-form :model="objectScheme" :rules="editFormRules" label-width="100px">
        <el-form-item label="名称：" prop="categoryName">
          <el-input v-model="objectScheme.categoryName" />
        </el-form-item>
        <el-form-item label="考核分数：" prop="score">
          <el-input v-model="objectScheme.score" onkeyup="value=value.replace(/[^\d]/g,'')" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
          v-preventReClick="3000"
          type="primary"
          @click="editData(objectScheme)"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'ExamScheme',
  data() {
    return {
      schemeList: [],
      currentPage: 1,
      pageSize: 5,
      totalNum: 0,
      // 控制编辑对话框的显示与隐藏变量
      editDialogVisible: false,
      // 编辑数据项表单验证规则对象
      editFormRules: {
        categoryName: [{ required: true, message: '请输入名称！', trigger: 'blur' }],
        score: [{ required: true, message: '请输入考核分数！', trigger: 'blur' }]
      },
      objectScheme: {
        atName: '',
        atId: -1,
        categoryName: '',
        categoryId: -1,
        score: 0
      },
      scoreList: [],
      obj: {}
    }
  },
  created() {
    this.getSchemeList()
  },
  methods: {
    /**
     * @description: 设置表格每行颜色
     * @param {*} row
     * @param {*} rowIndex
     * @return {*}
     * @author: Hongting Yuan
     */
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 4 === 3) {
        return 'warning-row'
      } else if (rowIndex % 4 === 1) {
        return 'success-row'
      }
      return ''
    },
    /**
     * @description: 点击编辑，显示编辑数据项对话框
     * @param {*}
     * @return {*}
     * @author: Hongting Yuan
     */
    showEditDialog(editObj) {
      this.objectScheme.atName = editObj.atName
      this.objectScheme.atId = editObj.atId
      this.objectScheme.categoryName = editObj.categoryName
      this.objectScheme.categoryId = editObj.categoryId
      this.objectScheme.score = editObj.score
      // console.log('this.objectScheme', this.objectScheme)
      this.editDialogVisible = true
    },
    /**
     * @description: 点击确定，上传编辑数据
     * @param {*}
     * @return {*}
     * @author: Hongting Yuan
     */
    editData(obj) {
      if (!obj.categoryName) {
        return this.$message.error('请输入考核名')
      } else if (!obj.score) {
        return this.$message.error('请输入考核分数')
      } else {
        this.obj.atId = parseInt(this.objectScheme.atId)
        this.obj.categoryId = parseInt(this.objectScheme.categoryId)
        this.obj.score = parseInt(this.objectScheme.score)
        this.scoreList = []
        this.scoreList.push(this.obj)
        axios
          .post('assessment/updateScores', {
            scoreList: this.scoreList
          })
          .then((res) => {
            // console.log(res)
            if (res.status !== 200) return this.$message.error('编辑数据失败')
            this.$message.success('编辑数据成功')
            this.getSchemeList()
            this.editDialogVisible = false
          })
          .catch((res) => {
            this.$message.info('取消编辑数据')
          })
      }
    },
    // tableRowClassName({ row, rowIndex }) {
    //   if (rowIndex === 3 || rowIndex === 8) {
    //     return 'warning-row'
    //   } else if (rowIndex === 1 || rowIndex === 5 || rowIndex === 11) {
    //     return 'success-row'
    //   }
    //   return ''
    // },
    // :span-method="objectSpanMethod"
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 0) {
    //     if (rowIndex === 0) {
    //       return {
    //         rowspan: 4,
    //         colspan: 1
    //       }
    //     } else if (rowIndex === 4 || rowIndex === 7 || rowIndex === 10) {
    //       return {
    //         rowspan: 3,
    //         colspan: 1
    //       }
    //     } else {
    //       return {
    //         rowspan: 0,
    //         colspan: 0
    //       }
    //     }
    //   }
    // },
    /**
     * @description: 获取考核方案列表并转换成需要的格式
     * @param {*}
     * @return {*}
     * @author: Hongting Yuan
     */
    getSchemeList() {
      var self = this
      axios.get('/assessment/getAllProgram')
        .then(res => {
          if (res.data.code !== 200) return this.$message.error('获取考核方案失败')
          // console.log(res)
          // this.schemeList = res.data
          // var sum = 0
          self.schemeList = []
          for (var i = 0; i < res.data.data.list.length; i++) {
            // console.log(res.data.data.list[i])
            for (var j = 0; j < res.data.data.list[i].categoryList.length; j++) {
              const objectScheme = {}
              objectScheme.atName = res.data.data.list[i].atName
              objectScheme.categoryName = res.data.data.list[i].categoryList[j].categoryName
              objectScheme.atId = res.data.data.list[i].atId
              objectScheme.categoryId = res.data.data.list[i].categoryList[j].categoryId
              objectScheme.score = res.data.data.list[i].categoryList[j].score
              self.schemeList.push(objectScheme)
            }
          }
          // console.log(self.schemeList)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less">
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
